應該要先講HTML5的結構 > <

但剛好最近在研究Video標籤。

今天分享筆記:

1. 影片檔是什麼?

2. 編譯解碼器是什麼?

3. 簡單使用<video>標籤嵌入影片

4. 相關連結
   呈現畫面的視訊(video) + 播放聲音的音訊(audio)= 影片檔。

影片檔在編輯時，會各別編輯視訊和音訊部分，儲存時在壓縮成一個檔案，

像這種壓縮成一個影片檔就叫做video container檔案。

例如:AVI檔案或MP4檔案。

每個瀏覽器支援的編譯解碼器都不同，影片包含視訊解碼器和音訊解碼器，

編譯解碼器是什麼?

例如:

1. 把母檔視訊做最大的壓縮之後，再做成影片檔的動作就叫做編碼。

2. 把影片檔的視訊拉出來顯示在影片播放器的動作則叫做解碼。

處理上述兩項動作的就是視訊解碼器。

視訊解碼器非常多，到目前為止，最新的瀏覽器大都支援 H.264，Ogg Theora和 VP8。

*H.264(MPEG4格式)-具有最高壓縮率和支援高畫質影像，
因在MPEG國際標準組織內具有專利，必須支付費用，
但在HTML5網頁標準下播放影片時，可以免費使用。

*Ogg Theora(Ogg格式)- 不需支付費用而被公開的解碼器。

*VP8(WebM格式)-是開放程式碼的解碼器，
也是Google所使用的解碼器。

以下編碼，無需安裝Flash插件，就能簡單的在瀏覽器上嵌入視訊了。

◎載入本機影片

<video width="640" height="368" controls="controls">
<source src="test.mp4" type="video/mp4" />
<source src="test.ogg" type="video/ogg" />
<source src="test.webm" type="video/webm" />
</video>

首先，我們先開始建立 <video> 標籤。

在<video>標籤裡再添加<source>標籤，

<source> 標籤是指定視訊的路徑。就好像<img>標籤那樣的意思。

在<video>標籤裡添加width & height 屬性，控制視訊的寬度和長度。

由於HTML5支援MP4，OGG，WEBM視訊這三種格式。

所以我們直接嵌入了三種格式的視訊，這樣只要瀏覽器支援HTML5，就一定會正常顯示。

◎載入外部網址影片

<video
src=http://progressive.totaleclips.com.edgesuite.net/105/e105598_257.mp4 >
很抱歉！您的瀏覽器不支援HTML5 Video
</video>

相關連結:

【转载】HTML5介绍：视频和音频
http://www.mhtml5.com/2012/06/5142.html

翻译：HTML5介绍：视频和音频<三>
http://www.riadev.com/flex-thread-277-1-1.html

超過 23 個開源的 HTML5 影音播放器與框架 - ( HTML5 Video Player )
http://inspire.twgg.org/programming/html-css/item/274-more-than-23-open-source-video-player-with-html5-video-framework.html

HTML5+CSS3+jQuery制作视频播放器完全指南
http://www.csdn.net/article/2012-05-09/2805471

定制HTML 5Video播放器
http://developer.51cto.com/art/201205/333790.htm

HTML5: Video 教程 (一)
http://www.rongxuan.org/2012/08/13/html5-video-%E6%95%99%E7%A8%8B-%E4%B8%80/

Using HTML5 audio and video
https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video

The Video.js API
http://videojs.com/docs/api/

An Introduction to HTML5′s Video API
http://www.developerdrive.com/2011/11/an-introduction-to-html5s-video-api-part-1/

小試HTML5 Video Tag
http://sholfen.pixnet.net/blog/post/32722556-%E5%B0%8F%E8%A9%A6html5-video-tag

使用HTML5 撥放影片
http://blogs.uuu.com.tw/Articles/post/2012/07/04/%E4%BD%BF%E7%94%A8HTML5-%E6%92%A5%E6%94%BE%E5%BD%B1%E7%89%87.aspx

HTML5 Audio/Video属性,方法,事件汇总
[http://www.e800.com.cn/articles/2012/0327/505846.shtml
http://itindex.net/detail/38755-html5-audio-video](http://www.e800.com.cn/articles/2012/0327/505846.shtml<br />
http://itindex.net/detail/38755-html5-audio-video)

開始HTML5 – Video
http://blog.csdn.net/abxn2002/article/details/7491900

HTML5教程:6.2 video元素与audio元素的属性
http://www.wangyexx.com/html/html5/1636.html

翻译：HTML5介绍：视频和音频<三>
http://www.riadev.com/flex-thread-277-1-1.html

新增音訊和視訊到您的網頁(microsoft IE教學文件)
http://msdn.microsoft.com/zh-tw/library/ie/hh771805(v=vs.85).aspx